import React from 'react';
import {Card, Button, Table, Form, Select, Modal, message} from 'antd';
import axios from '../../components/Engineering/axios';
import K from '../../components/Engineering/utils';

const FormItem = Form.Item;
const Option = Select.Option;


class FilterForm extends React.Component {
  componentDidMount() {
    // document.title = "共享单车 城市管理"
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <Form layout="inline">
        <FormItem label="城市">
          {
            getFieldDecorator('city_id')(
              <Select
                style={{width: 100}}
                placeholder="全部"
                defaultValue="1"
              >
                <Option value="">全部</Option>
                <Option value="1">北京市</Option>
                <Option value="2">天津市</Option>
                <Option value="3">深圳市</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="用车模式">
          {
            getFieldDecorator('mode')(
              <Select
                style={{width: 120}}
                placeholder="全部"
                defaultValue="1"
              >
                <Option value="">全部</Option>
                <Option value="1">指定停车点模式</Option>
                <Option value="2">禁停区模式</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="营运模式">
          {
            getFieldDecorator('op_mode')(
              <Select
                style={{width: 80}}
                placeholder="全部"
                defaultValue="1"
              >
                <Option value="">全部</Option>
                <Option value="1">自营</Option>
                <Option value="2">加盟</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="加盟商授权状态">
          {
            getFieldDecorator('auth_status')(
              <Select
                style={{width: 100}}
                placeholder="全部"
                defaultValue="1"
              >
                <Option value="">全部</Option>
                <Option value="1">已授权</Option>
                <Option value="2">未授权</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem>
          <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
          <Button>重置</Button>
        </FormItem>
      </Form>
    );
  }
}

class OpenCityForm extends React.Component {
  render() {
    const formItemLayout = {
      labelCol: {
        xs: {span: 5},
        md: {span: 5}
      },
      wrapperCol: {
        xs: {span: 10},
        md: {span: 19}
      }
    }
    const {getFieldDecorator} = this.props.form;  //todo kim-stamp 获取验证装饰器，用于和表单进行双向绑定
    return (
      <Form layout="horizontal">
        <FormItem label="选择城市" {...formItemLayout}>
          {
            getFieldDecorator('city_id', {
              initialValue: '1'
            })(
              <Select defaultValue="1">
                <Option value="0">全部</Option>
                <Option value="1">北京市</Option>
                <Option value="2">天津市</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="营运模式" {...formItemLayout}>
          {
            getFieldDecorator('op_mode', {
              initialValue: '1'
            })(
              <Select defaultValue="1">
                <Option value="1">自营</Option>
                <Option value="2">加盟</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="用车模式" {...formItemLayout}>
          {
            getFieldDecorator('use_mode', {
              initialValue: '1'
            })(
              <Select>
                <Option value="1">指定停车点</Option>
                <Option value="2">禁停区</Option>
              </Select>
            )
          }
        </FormItem>
      </Form>
    );
  }
}

export default class City extends React.Component {

  state = {
    list: [],
    isShowOpenCity: false
  }
  params = {
    page: 1
  }

  componentDidMount() {
    this.requestList();
  }

  // 默认请求我们的接口数据
  requestList = async () => {
    let _this = this;
    let res = await axios.ajax({
      url: '/open_city', params: {page: this.params.page}
    })
    let list = res.content.list.map((item, index) => {
      item.key = index;
      return item;
    });
    this.setState({
      list: list,
      pagination: K.pagination(res, (current) => {
        _this.params.page = current;
        _this.requestList();
      })
    })
  }

  // 开通城市
  handleOpenCity = () => {
    this.setState({
      isShowOpenCity: true
    })
  }
  // 城市开通提交
  handleSubmit = () => {
    let cityInfo = this.cityForm.props.form.getFieldsValue(); //todo kim-stamp获取双向绑定的值
    console.log(cityInfo);
    axios.ajax({
      url: '/city/open',
      params: cityInfo
    }).then((res) => {
      if (res.code == '0') {
        message.success('开通成功');
        this.setState({
          isShowOpenCity: false
        })
        this.requestList();
      }
    })
  }

  render() {
    const columns = [
      {
        title: '城市ID',
        dataIndex: 'id'
      }, {
        title: '城市名称',
        dataIndex: 'name'
      }, {
        title: '用车模式',
        dataIndex: 'mode',
        render(mode) {
          return mode == 1 ? '停车点' : '禁停区';
        }
      }, {
        title: '营运模式',
        dataIndex: 'op_mode',
        render(op_mode) {
          return op_mode == 1 ? '自营' : '加盟';
        }
      }, {
        title: '授权加盟商',
        dataIndex: 'franchisee_name'
      }, {
        title: '城市管理员',
        dataIndex: 'city_admins',
        render(arr) {
          return arr.map((item) => {
            return item.user_name;
          }).join(',');
        }
      }, {
        title: '城市开通时间',
        dataIndex: 'open_time'
      }, {
        title: '操作时间',
        dataIndex: 'update_time',
        render: K.formateDate
      }, {
        title: '操作人',
        dataIndex: 'sys_user_name'
      }
    ]
    return (
      <div>
        <Card style={{marginTop: 10}}>
          <FilterForm/>
        </Card>
        <Card style={{marginTop: 10}}>
          <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
        </Card>
        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.list}
            pagination={this.state.pagination}
          />
        </div>
        <Modal
          title="开通城市"
          visible={this.state.isShowOpenCity}
          onCancel={() => {
            this.setState({
              isShowOpenCity: false
            })
          }}
          onOk={this.handleSubmit}
        >
          <OpenCityForm wrappedComponentRef={(inst) => {
            this.cityForm = inst;
          }}/>
          {/* //todo kim-stamp 相当于Vue的ref获取ref(回调的一种)组件得值 */}
        </Modal>
      </div>
    );
  }
}

FilterForm = Form.create({})(FilterForm);
OpenCityForm = Form.create({})(OpenCityForm);
